<template>
  <div class="box">
    <div class="left">
      <el-button text @click="centerDialogVisible = true"
        >Click to open Dialog</el-button
      >
      <ul>
        <li v-for="item in leftData">label:{{ item.label }}&nbsp;&nbsp;</li>
      </ul>
    </div>
    <div class="right">
      <el-button text @click="_centerDialogVisible = true"
        >Click to open Dialog</el-button
      >
      <el-table :data="rightData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="sex" label="性别" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="adderss" label="地址" width="180" />
        <el-table-column prop="tel" label="手机号" width="180" />
        <el-table-column prop="hobbied" label="兴趣爱好" />
        <el-table-column prop="edaction" label="学历" />
        <el-table-column prop="explanation" label="解释" />
        <el-table-column prop="extend" label="扩展" />
      </el-table>
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      title="Choose Data"
      width="45%"
      center
      draggable
      top="12vh"
    >
      <Transfer
        leftBtnText="左边"
        rightBtnText="右边"
        rightTitleText="选中的手机"
        placeholderLeft="请输入关键字"
        placeholderRight="请输入关键字"
        type="default"
        :leftList="list"
        :columnTitles="columnTitles"
        :leftSearch="leftSearch"
        :rightSearch="rightSearch"
        setCheckLeftText="选中数据"
        setCheckRightText="选中数据"
        :setCheckLeftData="setCheckLeftData"
        :setCheckRightData="setCheckRightData"
        @send-data="sendLeftData"
        :toolTip="true"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >Confirm</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="_centerDialogVisible"
      title="Choose Data"
      width="56%"
      center
      draggable
      top="0vh"
    >
      <Transfer
        leftBtnText="上边"
        rightBtnText="下边"
        rightTitleText="选中的手机"
        placeholderLeft="请输入关键字"
        placeholderRight="请输入关键字"
        type="table"
        :leftList="_list"
        :columnTitles="columnTitles"
        :leftSearch="leftSearch"
        :rightSearch="rightSearch"
        setCheckLeftText="选中数据"
        setCheckRightText="选中数据"
        :setCheckLeftData="setCheckLeftData"
        :setCheckRightData="setCheckRightData"
        @send-data="sendRightData"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="_centerDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="_centerDialogVisible = false"
            >Confirm</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { list, _list, columnTitles } from "../../public/data/test.js";
let leftData = ref([]);
let rightData = ref([]);
let centerDialogVisible = ref(false);
let _centerDialogVisible = ref(false);
const leftSearch = (leftListData, filterLeftWord) => {
  leftListData = leftListData.filter((e) => {
    const values = Object.keys(e).filter(
      (v) => v !== "$checked" && v !== "disabled" && v !== "key"
    );
    for (let i = 0; i < values.length; i++) {
      if (e[values[i]] === filterLeftWord.trim()) {
        return true;
      }
    }
  });
  return leftListData;
};
const rightSearch = (rightListData, filterRightWord) => {
  rightListData = rightListData.filter((e) => {
    const values = Object.keys(e).filter(
      (v) => v !== "$checked" && v !== "disabled" && v !== "key"
    );
    for (let i = 0; i < values.length; i++) {
      if (e[values[i]] === filterRightWord.trim()) {
        return true;
      }
    }
  });
  return rightListData;
};
const setCheckLeftData = ref([1, 9]);
const setCheckRightData = ref([0, 4]);
const sendLeftData = (e) => {
  leftData.value = e;
};
const sendRightData = (e) => {
  rightData.value = e;
};
</script>
<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .left {
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  }
  .right {
    display: flex;
    align-items: center;
  }
}
</style>
